<template>
  <el-dialog class="chooseGroup"
             title="选择分组"
             :visible.sync="dialogVisible"
             width="48%"
             :append-to-body='true'
             :before-close="closeDialog">
    <div class="time-box">
      <span class="demonstration">时间:</span>
      <el-date-picker class="timeRange"
                      v-model="start_time"
                      type="datetime"
                      placeholder="开始时间"
                      value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <span>至</span>
      <el-date-picker class="timeRange"
                      v-model="end_time"
                      type="datetime"
                      placeholder="结束时间"
                      value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
    </div>
    <div>
      <el-row>
        <el-col :span="12"
                class="tree-box">
          <el-tree ref="tree"
                   show-checkbox
                   :default-expand-all="true"
                   :props="defaultProps"
                   :data="treeData"
                   :render-content="renderContent"
                   :expand-on-click-node="false"
                   @check-change="checkChnage">
          </el-tree>
        </el-col>
        <el-col :span="12"
                class="property-container">
          <el-checkbox v-show="propertyList.length>0"
                       @change="handleCheckAllChange"
                       checked>全选</el-checkbox>
          <div class="property-box"
               v-show="propertyList.length>0">
            <el-checkbox-group v-model="checkedPropertyList">
              <template v-for=" (item,index) in propertyList">
                <div :key="index"
                     class="item">
                  <el-checkbox :label="item.uri"
                               checked>
                    {{item.displayname}}
                  </el-checkbox>
                </div>
              </template>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
    </div>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="success"
                 @click="getPropertyList"
                 style="float:left;margin-left:10px">获取属性</el-button>
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import util from '@/utils'
import { getGisTree, findPropertiesByPropertyType } from '@/api/map'
import { gettree } from '@/api/relationFraph'
export default {
    data () {
        return {
            start_time: '',
            end_time: '',
            isShow: true,
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'displayname'
            },
            objectList: [],
            // 属性列表
            propertyList: [],
            cachePropertyList: [],
            // 已选中的属性列表
            checkedPropertyList: []
        }
    },
    props: {
        dialogVisible: Boolean
    },
    created () {
        this.unifiedUserUrl = this.$store.state.unifiedUserUrl
    },
    mounted () {
        this.loadTree()
    },
    methods: {
    // 关闭对话框
        closeDialog () {
            this.treeData = []
            this.propertyList = []
            this.cachePropertyList = []
            this.checkedPropertyList = []
            this.$emit('closeDialog')
        },
        // 查找出一级目录
        handleLevelOne(data, parent) {
            var tree = []
            var temp
            for (var i = 0; i < data.length; i++) {
            if (data[i].parentkey == parent) {
                var obj = data[i]
                obj.label = data[i].displayname
                obj.value = data[i].uri
                obj.parenturi = data[i].parenturi
                obj.parent = parent
                temp = this.handleLevelOne(data, data[i].ownkey)
                if (temp.length > 0) {
                obj.children = temp
                }
                tree.push(obj)
            }
            }
            return tree
        },
        // 加载左侧菜单树
        loadTree (type) {
            let obj = {
                uriList: '',
                typeList: ['socialaccount', 'socialdynamic', 'keyfigures', 'focusgroup'].join(',')
            }
            gettree(obj).then(res => {
                this.treeData =this.handleLevelOne(res.data)
            })
            // getGisTree().then(response => {
            //     let tree = response.data
            //     // 树状菜单去除备注节点
            //     tree = tree.filter(item => {
            //         return item.uri != 'com.scistor.object.note'
            //     })
            //     this.treeData = util.parseUriData(tree)
            //     // 一级节点禁止选择
            //     this.treeData = this.treeData.map(item => {
            //         if (!item.children) {
            //             item.disabled = true
            //         }
            //         return item
            //     })
            // })
        },
        // 选择对象
        checkChnage (node, isChecked, data) {
            this.objectList = []
            let checkedNodes = this.$refs.tree.getCheckedNodes()
            checkedNodes.forEach(element => {
                if (element.parenturi) {
                    this.objectList.push(element.uri)
                }
            })
        },
        // 获取属性
        getPropertyList () {
            if (this.objectList.length === 0) {
                this.$message.error('请选择对象!')
                return false
            }
            findPropertiesByPropertyType({ uris: this.objectList.join(','), propertyType: 'GisData,TimeInterval' }).then(response => {
                this.propertyList = response.data
                this.cachePropertyList = this.propertyList.map(ele => {
                    return ele.uri
                })
            })
        },
        // 全选
        handleCheckAllChange (val) {
            this.checkedPropertyList = val ? this.cachePropertyList : []
        },
        // 提交
        handleSubmit () {
            if (this.objectList.length === 0) {
                this.$message.error('请选择对象!')
                return false
            }
            if (this.propertyList.length === 0) {
                this.$message.error('请获取属性!')
                return false
            }
            if (!util.isEmpty(this.start_time) && !util.isEmpty(this.end_time)) {
                if (new Date(this.start_time).getTime() > new Date(this.end_time).getTime()) {
                    this.$message.error('开始时间不能大于结束时间')
                    return false
                }
            }
            if (!util.isEmpty(this.start_time) && util.isEmpty(this.end_time)) {
                this.$message.error('请输入结束时间')
                return false
            }
            if (util.isEmpty(this.start_time) && !util.isEmpty(this.end_time)) {
                this.$message.error('请输入开始时间')
                return false
            }
            // 如果没有勾选属性，默认传所有
            if (this.checkedPropertyList.length === 0) {
                this.checkedPropertyList = this.cachePropertyList
            }
            this.$emit('searchByDrawType', this.objectList, this.checkedPropertyList, this.start_time, this.end_time)
            this.closeDialog()
        },
        renderContent (h, { node, data }) {
            let img
            if (!util.isEmpty(data.icon)) {
                img = (
                    <img src={data.icon} class="userIcon" width="16px" height="16px" style="border-radius:16px;" />
                )
            }
            return (
                <p>
                    {img}
                    <span style="margin-left:10px;">{node.label}</span>
                </p>
            )
        }
    }

}
</script>
<style lang="less" >
.chooseGroup {
	.el-dialog__body {
		padding: 0px 0px;
		min-height: 320px;
	}
	.el-dialog__header {
		background: #157dd0;
		padding: 10px 20px 10px;
		.el-dialog__title {
			font-size: 16px;
			color: #ffffff;
		}
	}
	.el-dialog__footer {
		padding: 5px 20px;
		background-color: #ebf2fa;
	}
	.tree-box {
		padding: 10px 20px;
		max-height: 320px;
		overflow-y: auto;
	}
	.property-container {
		padding: 10px 20px;
		max-height: 320px;
		overflow-y: auto;
		.property-box {
			margin-top: 10px;
			padding-top: 10px;
			border-top: 1px solid #ccc;
			.item {
				margin: 5px 0px;
			}
		}
	}
	.time-box {
		background-color: #ebf2fa;
		padding: 5px 25px;
		.el-range-editor {
			height: 32px;
			line-height: 32px;
		}
		.el-range__icon {
			line-height: 25px;
		}
		.el-range-separator {
			line-height: 25px;
		}
	}
}
</style>
